<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" label-width="120px" inline>
                    <el-form-item label="学员姓名" label-width="90px">
                        <el-input v-model="form.name" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="进度">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车型">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="挂靠点">
                        <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <div @click="showMore = !showMore" style="color: #606266;cursor: pointer;
                        position: absolute;width: 100px;right: 0;top: 90px;">{{ showMore ? '收起更多' : '展开更多' }}</div>
                    <template  v-if="showMore">
                        <el-form-item label="本次收费">
                            <el-input v-model="form.name" size="small"></el-input>
                        </el-form-item>

                        <el-form-item label="收据/发票号" label-width="90px">
                            <el-input v-model="form.name" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="收费类型">
                            <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收费方式">
                            <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="审核">
                            <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="教练">
                            <el-input v-model="form.name" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="收款人" label-width="90px">
                            <el-input v-model="form.name" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="收款单号">
                            <el-input v-model="form.name" style="width:202px" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="收款备注" label-width="102px">
                            <el-input v-model="form.name" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="开始收费日期">
                            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.name" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="截止收费日期">
                            <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.name" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-form>
                <div class="btn mb-1">
                    <div class="btn_item1">
                        <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
                        <el-button type="info" plain size="small">取消审核</el-button>
                        <el-button type="info" plain size="small">批量审核</el-button>
                        <el-button type="info" plain size="small">导出</el-button>
                    </div>

                </div>
            </div>
        </header>

        <main>
            <div :style="{height:tableHeight}">
                <el-table :data="tableData" height="100%" border stripe
                    :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column type="selection" width="55" align="center" />

                    <el-table-column prop="" label="审核" sortable width="90" align="center" />

                    <el-table-column prop="pid" label="PID" sortable width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_money.html')">{{
                                    scope.row.pid

                                }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="pid" label="PID" sortable width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_person.html')">{{
                                    scope.row.pid

                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" sortable width="120" align="center" />

                    <el-table-column prop="car" label="车型" sortable width="120" align="center" />

                    <el-table-column prop="car" label="进度" sortable width="120" align="center" />
                    <el-table-column prop="name" label="类型" sortable width="120" align="center" />
                    <el-table-column prop="name" label="费用类型" sortable width="120" align="center" />
                    <el-table-column prop="name" label="报名类型" sortable width="120" align="center" />
                    <el-table-column prop="name" label="受理" sortable width="120" align="center" />
                    <el-table-column prop="name" label="收款单号" sortable width="120" align="center" />
                    <el-table-column prop="name" label="学费金额" sortable width="120" align="center" />
                    <el-table-column prop="name" label="累积实收" sortable width="120" align="center" />
                    <el-table-column prop="name" label="欠款金额" sortable width="120" align="center" />
                    <el-table-column prop="name" label="本次费用" sortable width="120" align="center" />
                    <el-table-column prop="" label="教练" sortable width="120" align="center" />
                    <el-table-column prop="" label="班别" sortable width="120" align="center" />
                    <el-table-column prop="" label="部门" sortable width="120" align="center" />
                    <el-table-column prop="" label="报名日期" sortable width="150" align="center" />
                    <el-table-column prop="" label="付款人" sortable width="150" align="center" />
                    <el-table-column prop="" label="付款方式" sortable width="150" align="center" />
                    <el-table-column prop="" label="付款日期" sortable width="150" align="center" />
                    <el-table-column prop="" label="备注" sortable width="150" align="center" />
                    <el-table-column prop="" label="审核人" sortable width="150" align="center" />
                    <el-table-column prop="" label="审核时间" sortable width="150" align="center" />
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="btn_item2">
                <p>本次收费累计：<span style="color:#409eff">￥{{ 999 }}元 </span></p>
            </div>
            <div class="pagin">
                <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
            </div>
        </footer>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-11-09 10:38:23  星期四
* @description   支出费用管理
**/

import { payOutAPI } from '@/api/adminstare'
import { oldLoginSystem } from '@/utils/publicMethod'
export default {
    data() {
        return {
            form: { name: '', region: '' },
            tableData: [],
            initParams: {
                action: "expendMoneyList",
                page: 1,
                pageSize: 20,
                sortStr: "id desc",
                moneytype: "expend",
            },
            // 分页总条数
            total: 0,
            showMore: false,
            tableHeight:'640px'
        }
    },
    mounted() {
        this.getListData()
    },
    watch:{ 
        showMore(newValue,oldValue) { 
            newValue ?  this.tableHeight = '540px' : this.tableHeight='640px'
        }
    },
    methods: {
        go(val, URL) {
            const redirectUrl = `${URL}?aid=${this.$store.getters.userInfo.jxid}&id=${val.pid}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },
        async getListData() {
            try {
                const result = await payOutAPI(this.initParams)
                this.total = result.data.dataList.length
                this.tableData = result.data.dataList
                console.log(result);
            } catch (error) { }
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
    }
}
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 8px;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .btn_item2 {
        width: 100%;
        display: flex;
        align-items: center;
        padding-top: 20px;

        p {
            margin: 0;
            &::before {
                display: inline-block;
                content: '';
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: #409eff;
                margin-right: 5px;
            }
        }
    }
}

.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>